<template>
  <m-modal
    v-model="visible"
    :title="title"
    okText="确定"
    cancelText=""
    class="v-list-select-modal"
    :width="176"
    :showFooter="multiple"
    :top="top"
    :left="left"
    @cancel="handleCancel"
    @ok="handleSave"
  >
    <div class="_search g-tc g-m-tb-6" >
      <a-input-search v-model="searchName" placeholder="搜索" style="width: 160px" size="small" />
    </div>
    <div class="_content-list">
      <div
        v-for="item in filteredList"
        :key="item.value"
        class="_row g-pd-lr-18 g-pd-tb-2"
        :class="{_selected:selectedItems.includes(item),_disabled:item.disabled}"
        @click="handleSelect(item)"
      >
        <img :src="item.icon" class="_icon-img"  style="width:14px;display"/>
        {{item.label || '---'}}
      </div>
    </div>
  </m-modal>
</template>
<script>
import { Portal } from 'src/components/common/Portal.vue';
import Modal from 'src/components/common/CustomModal';
import Attribute from '../comps/Attribute';

const comp = {
  name: 'comp-list-select',
  components: {
    'm-modal': Modal,
    'm-attribute': Attribute
  },
  props: {
    title: {
      type: String,
      default: '选择'
    },
    list: Array, //// {label:'', value:'',icon:'',disabled: false}
    defaultSelectedIds: {
      type: Array,
      default: () => []
    },
    multiple: Boolean,
    top: [Number, String],
    left: [Number, String]
  },
  data() {

    return {
      visible: false,
      searchName: '',
      selectedItems: this.list.filter(i => this.defaultSelectedIds.includes(i.key))

    };
  },
  computed: {
    filteredList(){
      if (!this.searchName) return this.list;
      return this.list.filter(i => i.label.includes(this.searchName));
    }

  },
  mounted(){
    this.visible = true;
  },

  methods: {
    handleOk(res){
      this.visible = false;
      this.$emit('sure', res);
    },
    handleCancel(){
      this.visible = false;
      this.$emit('close');
    },
    handleSelect(item){
      if (item.disabled) return;
      this.toggle(item);
      if (!this.multiple && this.selectedItems[0]) this.handleOk(this.selectedItems[0]);

    },
    toggle(item){
      if (this.multiple){
        const index  = this.selectedItems.findIndex(i => i.value === item.value);
        if (index > -1){
          this.selectedItems.splice(index, 1);
        } else {
          this.selectedItems.push(item);

        }
      } else {
        this.selectedItems = [item];

      }

    },
    handleSave(){
      this.handleOk(this.selectedItems);
    }

  }
};
export default comp;
export const listSelect = new Portal(comp);
</script>
<style lang="scss">
.v-list-select-modal {
  ._content-list {
    min-height: 190px;
    max-height: 320px;
    overflow: auto;
    padding-bottom:10px

  }
  ._icon-img {
    width: 14px;
    display: inline-block;
    position: relative;
    top:-2px;
    margin-right: 4px;
  }
	._row {
    font-size: 12px;
		cursor: pointer;
		&:hover {
			background-color: #e6f7ff;
		}
		&._selected {
				background-color:#bae7ff;
				&:hover {
					background-color: #bae7ff;
				}
		}
    &._disabled {
      background: white;
      color: rgba(0,0,0,0.25);
      cursor:not-allowed
    }

	}

}
</style>
